import axios from 'axios';
import React, { Component } from 'react'
import './Gedan.css';

export default class Gedan extends Component {
    state = {
        data: {}
    }
    render() {
        
        return (
            <div className="dan-container">
                <div className="head">
                    <div className="img">
                        <img src={this.state.data.imgurl} alt="" />
                    </div>
                    <div className="info">
                        <h2>{this.state.data.dissname}</h2>
                    </div>
                </div>
                <div className="clearfix"></div>
                <div className="songs-list">
                    <table>
                        <thead>
                            <tr><td>ID</td><td>歌曲</td><td>歌手</td><td>专辑</td><td>时长</td></tr>
                        </thead>
                        <tbody>
                            {
                                this.state.data.songlist && this.state.data.songlist.map((item, index) => {
                                    return <tr key={item.id}><td>{index + 1}</td><td>{item.title}</td><td>{item.singer}</td><td>{item.album}</td><td>{item.duration}</td></tr>;
                                })
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }

    async componentDidMount(){
        let id = 4;
        //发送请求 获取歌单的详细内容
        let result = await axios('http://api.xiaohigh.com/songlist/' + id);
        //保存数据
        this.setState({
            data: result.data
        })
    }
}
